<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        hello this is {{msg}}
        <br>
        {{1+1}}
        <h1>{{Date.now()}}</h1>
        <h2>{{getAuthor()}}</h2>
        <!-- 
            花括号里可以写data里数据 也可以写函数得到返回值

            注意区分js表达式和js代码
                1.表达式：一个表达式会生成一个值，可以放在任何一个需要之的地方
                    a
                    a+b
                    demo(1)
                    三元表达式
                2.js代码 不生成值 控制语句逻辑
                    if(){}
                    for(){}
         -->
    </div>
    
    <script src="../vuejs/vue.js"></script>
    <script>
        new Vue({
            el: '#root', // el用于指定当前vue实例为哪个容器服务
            data() { // data用于存储数据 数据提供el所指定的容器去使用
                return {
                    msg: "vue2"
                }
            },
            methods: {
                getAuthor(){
                    return 'geekrose'
                }
            },
        })
        // 容器与实例 一对一
    </script>
</body>
</html>